import {FC, useRef, useEffect, createRef, forwardRef } from 'react'

//函数组件是不能直接使用Ref来引用的

//forwardRef(函数组件) 可以用于传递Ref 也可以让子组件暴露方法给父组件

//ts类型   forwardRef<ref类型，props类型>()
type h = HTMLInputElement | null

type p = {
    age: number
}

//步骤2：创建一个组件，并且使用forwardRef 包裹
const Child = forwardRef<h,p>((props,ref)=>{
    console.log('child组件的',props);
    
    return(
        <fieldset>
            <legend>Child</legend>
            {/* 步骤4：接收到父组件传递的Ref */}
            <h1 ref={ref} >一个子组件</h1>
        </fieldset>
    )
})

const Forward:FC<any> = ()=>{
    let ipt = useRef<HTMLInputElement>(null)
    let c = useRef<h>(null)
    //需求:父组件中可以获取子组件中的h1标签
    useEffect(()=>{
        console.log(ipt);
        // 步骤1：
        //要传递的Ref
        console.log(c.current!.style.color='deepskyblue');
    })
    return (
        <fieldset>
            <legend>forward</legend>
            <input type="text" ref={ipt} />
            {/* 步骤3：展示组件，并且打上Ref */}
            <Child ref={c} age={30} />
        </fieldset>
    )
}

export default Forward